<template>
  <div class="wrapper">
    <router-link class="city-name" to="/city" tag="div">
      <p class="city-content">{{this.currentCity}}</p>
      <span class="iconfont city-icon">&#xe639;</span>
    </router-link>
    <router-link class="search" border-radius to="/search">
      <div class="iconfont search-icon">&#xe62b;</div>
      <div class="search-content">搜索商家</div>
    </router-link>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: 'HomeHeader',
  computed: {
    ...mapState({
      currentCity: 'city'
    })
  }
}
</script>

<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'
  .wrapper
    position absolute
    z-index 2
    top 0
    left 0
    right 0
    bottom 0
    height 100px
    background-image linear-gradient(to bottom, rgba(0,0,0,0.4) 40%, transparent)
    padding()
    display flex
    justify-content space-between
    align-items center
    .city-name
      min-width 85px
      color $whiteFzClor
      font-size $fzThird
      height 100px
      position relative
      line-height 100px
      padding-right:30px
      box-sizing border-box
      .city-icon
        font-size $fzFifth
        position  absolute
        right 0
        top 0
    .search
      flex 1
      height 60px
      margin-left 56px
      display flex
      padding-left 40px
      box-sizing border-box
      color $whiteFzClor
      line-height 64px
      .search-icon
        font-size $fzThird
        margin-right 32px
      .search-content
        font-size $fzThird
    [border-radius]::before
      border-color $whiteFzClor
      border-radius 60px
</style>
